<template>
  <div>
    <common-dialog :componentSetOptions="componentSetOptions"/>
  </div>
</template>

<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      componentSetOptions: { //设置组件属性
        isDialog: true,//dialog 默认是否显示 true 是 false 否
        loading: false,
        dialogTitle: '我是dialog',//dialog标题co
        dialogTop: '20px',//dialog 头部距离
        dialogWidth: '800px',//dialog 长度
        formRef: 'ruleForm',//ref名称
        formLabelWidth: "150",//label 长度
        formClass: '',//添加的class 多个用空格隔开
        //表单配置
        formListProp: [
          {
            show: true,//是否显示 true 显示，false 不显示
            label: '输入框不在json里面',//名称
            field: 'a1',//字段名
            itemClass: '',//这行的class
            width: '610',// 输入框等长度
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            rules: [{required: true, message: `请输入电话号码`, trigger: 'blur'}],
            changeMethod: '',//方法名
            type: 'input',//数据类型
          }, {
            show: true,//是否显示 true 显示，false 不显示
            label: '输入框在json里面',//名称
            field: 'a2',//字段名
            itemClass: '',//这行的class
            width: '610',// 输入框等长度
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            changeMethod: '',//方法名
            rules: [{required: true, message: `123`, trigger: 'blur'}],
            type: 'inputJson',//数据类型
            jsonName: 'name',//是json里面的字段
          }, {
            show: true,//是否显示 true 显示，false 不显示
            label: '文本域',//名称
            field: 'a3',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '610',//长度
            changeMethod: '',//方法名
            rules: [{required: true, message: `请输入1电话号码`, trigger: 'blur'}],
            type: 'textarea',//数据类型
            minRows: '2', //最小几行
            maxRows: '40',//最多几行
          }, {
            show: true,//是否显示 true 显示，false 不显示
            label: '单选框',//名称
            field: 'a4',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '610',//长度
            changeMethod: '',//方法名
            rules: [{required: true, message: `请输入1电话号码`, trigger: 'blur'}],
            type: 'radio',//数据类型
            prop: [ //选择的值
              {
                label: '选项1',
                value: '1'
              }, {
                label: '选项2',
                value: '2'
              }
            ]
          }, {
            show: true,//是否显示 true 显示，false 不显示
            label: '多选框',//名称
            field: 'a5',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '610',//长度
            changeMethod: '',//方法名
            rules: [{required: true, message: `请输入电话号码`, trigger: 'blur'}],
            type: 'checkbox',//数据类型
            prop: [ //选择的值
              {
                label: '选项11',
                value: '1'
              }, {
                label: '选项12',
                value: '2'
              }
            ]
          }, {
            show: true,//是否显示 true 显示，false 不显示
            label: '下拉框',//名称
            field: 'a6',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '',//长度
            changeMethod: '',//方法名
            rules: [{required: true, message: `请输入电话号码`, trigger: 'blur'}],
            type: 'select',//数据类型
            filterable: true,//是否可输入搜索 false不可以 true可以
            clearable:true,//false关闭  true 开启
            prop: [ //选择的值
              {
                label: '选项1',
                value: '1'
              }, {
                label: '选项2',
                value: '2'
              }
            ]
          }, {
            show: true,//是否显示 true 显示，false 不显示
            label: '二个时间选择器',//名称
            field: 'a7',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '610',//长度
            changeMethod: '',//方法名
            rules: [{required: true, message: `请输入电话号码`, trigger: 'blur'}],
            type: 'date',//数据类型
            dataType: 'daterange'//时间格式 可以是year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
          }, {
            show: true,//是否显示 true 显示，false 不显示
            label: '一个时间选择器',//名称
            field: 'a8',//字段名
            itemClass: '',//这行的class
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            width: '610',//长度
            changeMethod: '',//方法名
            rules: [{required: true, message: `请输入电话号码`, trigger: 'blur'}],
            type: 'oneDate',//数据类型
            oneDataType: 'date'//时间格式 可以是year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange
          }, {
            show: true,//是否显示 true 显示 false 不显示
            label: '文件上传',//名称
            field: 'a9',//字段
            itemClass: '',//这行的class
            width: '610',//长度
            rules: [{required: true, message: `请输入电话号码`, trigger: 'blur'}],
            type: 'uploadFile',//数据类型
            accept: '.xls,.xlsx,.doc,.docx,.ppt,.pdf,.txt',//可上传文件格式,用,号隔开 .xls,.xlsx,.doc,.docx,.ppt,.pdf,.txt
          }, {
            show: true,//是否显示 true 显示 false 不显示
            label: '图片上传',//名称
            field: 'a10',//字段
            itemClass: '',//这行的class
            width: '610',//长度
            rules: [{required: true, message: `请输入电话号码`, trigger: 'blur'}],
            type: 'uploadImg',//数据类型
            accept: '.png,.jpg',//可上传文件格式,用,号隔开 .png,.jpg
            isAll: false,//是否多图上传 true 是 false 否
            urlType: 'pc_url',//使用那种格式的图片 mobile_url:手机图片 pc_url:pc图片 url:原生大小
            size: '2',//最大上传几MB的图片
          }, {
            show: true,//是否显示 true 显示 false 不显示
            label: 'titleChild',//名称
            itemClass: '',//这行的class
            width: '760',//长度
            type: 'titleChild',//数据类型
          }, {
            show: true,//是否显示 true 显示，false 不显示
            label: '选择element图标',//名称
            field: 'eIconPickerField',//字段名
            itemClass: '',//这行的class
            width: '',// 输入框等长度
            disabled: false,//是否不能输入 true 不可以输入 false 可以输入
            changeMethod: '',//方法名
            rules: [{required: true, message: `123`, trigger: 'blur'}],
            type: 'eIconPicker',//数据类型 选择element图标
            jsonName: 'name',//是json里面的字段
          }
        ],
        //按钮配置
        dialogBut: { //dialog 按钮
          class: '',//class
          operate: [{ //按钮集合 取消和确定方法名不要变，自动生成
            name: '取消',//按钮名称
            type: '',//按钮颜色 primary success info warning danger text
            icon: '', //图标
            plain: true,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'dialogCancel', //按钮方法
            id: '20000',//权限 20000 默认显示
          }, { //按钮集合
            name: '确定',//按钮名称
            type: 'primary',//按钮颜色 primary success info warning danger text
            icon: '', //图标
            plain: false,// 是否朴素按钮 false 否 true 是
            round: false, // 是否圆角 false 否 true 是
            method: 'dialogDetermine', //按钮方法
            id: '20000',//权限 20000 默认显示
          }]
        },
        formData: {
          id: '',
          a1: '1',
          name: {a2: '2'},
          a3: '1',
          a4: '2',
          a5: ['2'],
          a6: '1',
          a9: [],
          a10: [],
          eIconPickerField:'el-icon-caret-left'
        },//修改按钮id不为空 编辑点击确定的时候传过去的值
      },
    };
  },
  mounted() {
    // console.log(this.componentSetOptions['formListProp'][0]['value'])
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>
